<template>
    <div class="app-container">
        <searchForm :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset" :formLabelWidth="formLabelWidth"
            v-show="showSearch" />
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane v-for="tab in cardHandleTabs" :key="tab.value" :label="tab.label" :name="tab.value">
                <el-table :data="getFilteredTableData(tab.value)" v-loading="loading" border stripe>
                    <el-table-column label="学生姓名" prop="studentName" width="100" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="注册号" prop="registerCode" width="120" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="身份证号码" prop="cardCode" width="180" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="年级名称" prop="gradeName" width="100" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="班级名称" prop="className" width="120" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="学生类型" prop="studentType" width="100" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="籍贯" prop="nativePlace" width="120" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="民族" prop="nation" width="80" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.bc_nation_type" :value="scope.row.nation"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="入学时间" prop="joinDate" width="120" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column v-if="activeTab == '2'" label="购票区间(家庭)" prop="famRange" width="150"
                        :show-overflow-tooltip="true" align="center" />
                    <el-table-column v-if="activeTab == '2'" label="购票区间(学校)" prop="schoolRange" width="150"
                        :show-overflow-tooltip="true" align="center" />
                    <el-table-column v-if="activeTab != '2'" label="乘车终点" prop="finalStop" width="120"
                        :show-overflow-tooltip="true" align="center" />
                    <el-table-column label="学校所在地" prop="schoolAddress" width="150" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="家庭地址" prop="address" width="200" :show-overflow-tooltip="true"
                        align="center" />
                    <!-- <el-table-column label="证件补办类型" prop="cardHandleType" width="120" :show-overflow-tooltip="true"
                        align="center">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.card_handle_type"
                                :value="scope.row.cardHandleType"></dict-tag>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="补办说明" width="180" prop="remarks" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="审批状态" prop="status" width="100" :show-overflow-tooltip="true"
                        align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.status | statusText }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="审批驳回说明" width="180" prop="rejectMsg" :show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column label="操作" align="center" fixed="right" width="80"
                        class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" v-if="scope.row.status == '0'"
                                v-hasPermi="['dailyroutine:studentID:approve']"
                                @click="handleUpdate(scope.row)">审批</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="getFilteredTotal(tab.value) > 0" :total="getFilteredTotal(tab.value)"
                    :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-tab-pane>
        </el-tabs>
        <editDlg ref="editDlgRef" @onSearch="getList"></editDlg>
    </div>
</template>

<script>
import searchForm from "@/components/Search/searchForm.vue";
import editDlg from "./modules/editDlg.vue";
import {
    studentIDList
} from "@/api/dailyroutine/studentID.js";
export default {
    name: "studentID",
    components: {
        searchForm,
        editDlg
    },
    dicts: ["card_handle_type", "bc_nation_type"],
    data() {
        return {
            formLabelWidth: "120px",
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                famRange: undefined,
                schoolRange: undefined,
                finalStop: undefined,
                schoolAddress: undefined,
                studentType: undefined,
                cardCode: undefined,
                joinDate: undefined,
                nativePlace: undefined,
                nation: undefined,
                birthday: undefined,
                address: undefined
            },
            tableData: [],
            // 遮罩层
            loading: true,
            total: 0,
            // 当前激活的tab
            activeTab: ''
        }
    },
    computed: {
        // 动态生成证件补办类型tabs
        cardHandleTabs() {
            const tabs = [];
            if (this.dict && this.dict.type && this.dict.type.card_handle_type) {
                this.dict.type.card_handle_type.forEach(item => {
                    tabs.push({
                        label: item.label,
                        value: item.value
                    });
                });
            }
            this.$nextTick(() => {
                if (this.cardHandleTabs.length > 0) {
                    this.activeTab = this.cardHandleTabs[0].value;
                }
            });
            return tabs;
        },
        // 动态生成表单选项
        formOptions() {
            const baseOptions = [
                {
                    label: "学生姓名",
                    prop: "studentName",
                    element: "el-input",
                    placeholder: "请输入学生姓名"
                },
                {
                    label: "注册号",
                    prop: "registerCode",
                    element: "el-input",
                    placeholder: "请输入注册号"
                },
                {
                    label: "身份证号码",
                    prop: "cardCode",
                    element: "el-input",
                    placeholder: "请输入身份证号码"
                },
                {
                    label: "学生类型",
                    prop: "studentType",
                    element: "el-input",
                    placeholder: "请输入学生类型"
                }
            ];
            
            // 只有当activeTab为'2'时才显示购票区间相关字段
            if (this.activeTab === '2') {
                baseOptions.push(
                    {
                        label: "购票区间(家庭)",
                        prop: "famRange",
                        element: "el-input",
                        placeholder: "请输入购票区间(家庭)"
                    },
                    {
                        label: "购票区间(学校)",
                        prop: "schoolRange",
                        element: "el-input",
                        placeholder: "请输入购票区间(学校)"
                    }
                );
            }
            
            return baseOptions;
        }
    },
    created() {
        this.getList()
    },
    mounted() {
        // 设置默认激活的tab为第一个证件补办类型

    },
    methods: {
        onSearch(val) {
            // 查询条件和分页数据合并
            this.queryParams = Object.assign(this.queryParams, val);
            this.getList();
        },
        // 重置
        onReset(data) {
            this.queryParams = Object.assign(this.queryParams, data);
            this.getList();
        },
        handleUpdate(row) {
            this.$refs.editDlgRef.open(row)
        },
        getList() {
            this.loading = true;
            studentIDList(this.queryParams).then((res) => {
                this.tableData = res.rows
                this.loading = false;
                this.total = res.total
            })
        },
        // 处理tab切换
        handleTabClick(tab) {
            this.activeTab = tab.name;
        },
        // 根据证件补办类型过滤表格数据
        getFilteredTableData(tabValue) {
            return this.tableData.filter(item => item.cardHandleType === tabValue);
        },
        // 获取过滤后的数据总数
        getFilteredTotal(tabValue) {
            return this.tableData.filter(item => item.cardHandleType === tabValue).length;
        }
    },
    filters: {
        statusText(val) {
            let _text = ""
            switch (val) {
                case "0":
                    _text = "审批中"
                    break;
                case "1":
                    _text = "审批通过"
                    break;
                case "2":
                    _text = "审批拒绝"
                    break;
            }
            return _text
        }
    }
}
</script>

<style></style>